<template>
  <form name="item-{{action}}"
        v-bind:class="['form', 'tab-form',
        fold?'fold-form--folded':'form-unfolded']">

    <field name="name" placeholder="name" input="tab.name" icon="user">
      <input name="tab-form--tabname" type="text"
              tabindex="1" class="form-input form-input--tabname"
              placeholder="name" v-model="tab.name" />
    </field>

    <field name="twitch" placeholder="twitch" input="tab.twitch" icon="twitch">
      <input name="tab-form--tabname" type="text"
              tabindex="1" class="form-input form-input--twitch"
              placeholder="twitch" v-model="tab.twitch" />
    </field>
    <field name="kageshi" placeholder="kageshi" input="tab.kageshi"
          icon="commenting-o">
      <input name="tab-form--tabname" type="text"
              tabindex="1" class="form-input form-input--kageshi"
              placeholder="kageshi" v-model="tab.kageshi" />
    </field>
    <field name="youtube" placeholder="youtube"
            input="tab.youtube"
            icon="youtube-play">
      <input name="tab-form--tabname" type="text"
              tabindex="1" class="form-input form-input--youtube"
              placeholder="youtube" v-model="tab.youtube" />
    </field>
    <field name="twitter" placeholder="twitter"
            input="tab.twitter"
            icon="twitter">
      <input name="tab-form--tabname" type="text"
              tabindex="1" class="form-input form-input--twitter"
              placeholder="twitter" v-model="tab.twitter" />
    </field>
    <field name="facebook" placeholder="facebook"
            input="tab.facebook"
            icon="facebook">
      <input name="tab-form--tabname" type="text"
              tabindex="1" class="form-input form-input--facebook"
              placeholder="facebook" v-model="tab.facebook" />
    </field>

    <input type="submit"
            tabindex="4"
            v-bind:class="['form-action', 'form-submit',
                            'tab-form--action', 'tab-form--submit']"
            value="{{action}}"
            v-on:click="dispatch($event)" />
    <input type="reset"
            tabindex="5"
            v-bind:class="['form-action', 'form-cancel',
                    'tab-form--action', 'tab-form--cancel']"
            value="cancel"
            v-on:click="toggleForm($event)" />
  </form>
</template>

<script>
  'use strict';
  import store from '../../store';
  import field from './field.vue';
  export default {
    data() {
      return {
        selected: this.$select('selected'),
        tab: {
          'name': '',
          'twitch': '',
          'kageshi': '',
          'youtube': '',
          'facebook': '',
          'twitter': '',
        },
      };
    },
    components: {
      field,
    },
    created() {
      if (this.action === "edit") {
          this.tab = this.selected;
      }
    },
    props: ['action', 'fold', 'streamers', 'grouped', 'maxgroup'],
    methods: {
      dispatch(e) {
        e.preventDefault();
        switch(this.action) {
          case 'add':
            this.addTab();
          default:
            return false;
        }
      },
      addTab() {
        const { addTab } = store.actions;
        const tab = Object.assign({ },
                                  {id: this.streamers.length + 1},
                                  this.tab);
        store.dispatch(addTab(tab));
        this.grouped = this.streamers.length >= this.maxgroup;
      },
      toggleForm(e) {
          if (e) {
            e.preventDefault()
          }
          this.fold = !(this.fold);
      },
    },
  }
</script>
